<script setup lang="ts">
import MySwiper from '@/components/mySwiper/index.vue'
// 这是自己写的原生版本
definePageMeta({
  layout: 'default-home',
  title: '主页',
  i18n: 'menu.home',
})
const { t } = useI18n()
const router = useRouter()
const menuList = reactive([
  { id: 0, title: "home_page.leftMenu.home", icon: 'fire-o', urls: 'img/home.png', url: 'img/un-home.png' },
  { id: 1, title: "home_page.leftMenu.favorite", icon: 'like-o', urls: 'img/love.png', url: 'img/un-love.png' },
  { id: 2, title: "home_page.leftMenu.slots", icon: 'gift-o', urls: 'img/slots.png', url: 'img/un-slots.png', logo: '' },
  { id: 3, title: "home_page.leftMenu.chess", icon: 'smile-o', urls: 'img/qp.png', url: 'img/un-qp.png', logo: '' },
  { id: 4, title: "home_page.leftMenu.fish", icon: 'gem-o', urls: 'img/by.png', url: 'img/un-by.png', logo: '' },
  { id: 5, title: "home_page.leftMenu.person", icon: 'contact-o', urls: 'img/zr.png', url: 'img/un-zr.png', logo: '' },
  { id: 6, title: "home_page.leftMenu.lottery", icon: 'balance-o', urls: 'img/cp.png', url: 'img/un-cp.png', logo: '' },
]);
// 各类游戏列表
const categoryList = ref([
  {
    id: 0,
    title: "home_page.leftMenu.favorite",
    logo: '/img/app_icon_love.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },
  {
    id: 1,
    title: "home_page.leftMenu.slots",
    logo: '/img/app_icon_slots.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar1.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },
  {
    id: 2,
    title: "home_page.leftMenu.chess",
    logo: '/img/app_icon_qp.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },
  {
    id: 3,
    title: "home_page.leftMenu.fish",
    logo: '/img/app_icon_fish.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },
  {
    id: 4,
    title: "home_page.leftMenu.person",
    logo: '/img/app_icon_zr.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },
  {
    id: 5,
    title: "home_page.leftMenu.lottery",
    logo: '/img/app_icon_cp.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili'
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva'
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ'
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX'
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法'
      },
    ]
  },

])
const jackpotList = reactive([
  { id: 1, title: "用户名称", gold: '999999', img: 'img/avatar.png', gameName: '游戏名称' },
  { id: 2, title: "用户名称", gold: '666666', img: 'img/avatar.png', gameName: '游戏名称' },
  { id: 3, title: "用户名称", gold: '888888', img: 'img/avatar.png', gameName: '游戏名称', },
  { id: 4, title: "用户名称", gold: '999999', img: 'img/avatar.png', gameName: '游戏名称', },
]);
const gameTab = ref([
  { id: 0, title: 'ALL', img: '/img/tab_all.png', unImg: '/img/tab_all_un.png' },
  { id: 1, title: 'ALL', img: '/img/tab_luva.png', unImg: '/img/tab_luva_un.png' },
  { id: 2, title: 'ALL', img: '/img/tab_pg.png', unImg: '/img/tab_pg_un.png' },
  { id: 3, title: 'ALL', img: '/img/tab_pp.png', unImg: '/img/tab_pp_un.png' },
  { id: 4, title: 'ALL', img: '/img/tab_jili.png', unImg: '/img/tab_jili_un.png' },
])
const menuAactive = ref(0);
const active = ref(0);
const menuContainer = ref<HTMLElement | null>(null)
const menuItemRefs = ref<(HTMLElement | null)[]>([]) // 存储每个菜单项的 DOM 引用
const contentItems = ref<HTMLElement[]>([]);

const setContentItemRef = (el: HTMLElement | null, index: number) => {
  if (el) {
    contentItems.value[index] = el;
  }
};
const contBox = ref<HTMLElement | null>(null)
  const handleClickNav = async (item: any, index: number) => {
  // 先滚动菜单
  const targetItem = menuItemRefs.value[index]
  const container = menuContainer.value
  const containerWidth = container?.clientWidth ?? 0
  const itemPosition = targetItem?.offsetLeft ?? 0
  const itemWidth = targetItem?.offsetWidth ?? 0
  const targetScrollLeft = itemPosition - (containerWidth / 2 - itemWidth / 2)

  container?.scrollTo({
    left: targetScrollLeft,
    behavior: 'smooth'
  })

  // 设置 active
  menuAactive.value = index

  // 等待 DOM 更新
  await nextTick()
  
  // 滚动右侧内容
  const targetElement = contentItems.value[index]
  if (targetElement && contBox.value) {
    // 计算相对于 contBox 的偏移量
    const targetOffset = targetElement.offsetTop - contBox.value.offsetTop
    
    contBox.value.scrollTo({
      top: targetOffset,
      behavior: 'smooth'
    })
  }
}
const goAnnouncement = () => {
  router.push('/home/announcement')
}
// 热门游戏数据
const swiperList = ref([
  {
    id: 1,
    img: '/game/avatar0.png',
    name: 'jili'
  },
  {
    id: 2,
    img: '/game/avatar1.png',
    name: 'luva'
  },
  {
    id: 3,
    img: '/game/avatar2.png',
    name: 'QQ'
  },
  {
    id: 4,
    img: '/game/avatar3.png',
    name: 'WX'
  },
  {
    id: 5,
    img: '/game/avatar4.png',
    name: '方法'
  },
])
const tabContArr = ref([
  {
    id: 1,
    img: '/game/avatar0.png',
    name: 'jili'
  },
  {
    id: 2,
    img: '/game/avatar1.png',
    name: 'luva'
  },
  {
    id: 3,
    img: '/game/avatar2.png',
    name: 'QQ'
  },
  {
    id: 4,
    img: '/game/avatar3.png',
    name: 'WX'
  },
  {
    id: 5,
    img: '/game/avatar4.png',
    name: '方法'
  },
  {
    id: 6,
    img: '/game/avatar4.png',
    name: '好好'
  },
])
const hotBoxRef = ref<HTMLElement | null>(null)
const itemWidth = ref<number>(0)
const isAtStart = ref(true)
const isAtEnd = ref(false)
// 在组件挂载后获取子元素宽度
onMounted(() => {
  if (hotBoxRef.value && hotBoxRef.value.children.length > 0) {
    // 假设所有 .item 的宽度相同
    itemWidth.value = (hotBoxRef.value.children[0] as HTMLElement).offsetWidth
    updateNavigationState()
  }

  hotBoxRef.value?.addEventListener('scroll', updateNavigationState)
})
// 更新导航按钮状态
const updateNavigationState = () => {
  if (!hotBoxRef.value) return

  const scrollLeft = hotBoxRef.value.scrollLeft
  const scrollWidth = hotBoxRef.value.scrollWidth
  const clientWidth = hotBoxRef.value.clientWidth

  isAtStart.value = scrollLeft === 0
  isAtEnd.value = scrollLeft + clientWidth >= scrollWidth - 1 // 容错处理
}
const pre = () => {
  if (hotBoxRef.value) {
    const currentScrollLeft = hotBoxRef.value.scrollLeft
    const scrollAmount = itemWidth.value + 10 // 包含 mr-10 的间距

    // 向左滚动一个元素宽度
    hotBoxRef.value.scrollTo({
      left: currentScrollLeft - scrollAmount,
      behavior: 'smooth'
    })
  }
}

const next = () => {
  if (hotBoxRef.value && itemWidth.value) {
    const currentScrollLeft = hotBoxRef.value.scrollLeft
    const scrollAmount = itemWidth.value + 10 // 加上间距

    hotBoxRef.value.scrollTo({
      left: currentScrollLeft + scrollAmount,
      behavior: 'smooth'
    })
  }
}
</script>

<template>
  <div>
    <!-- 顶部logo和菜单栏 -->
    <van-sticky>
    <div class="top px-10 pt-10">
      <div class="flex items-center justify-between">
        <img src="/img/logo.png" class="w-50 h-32" alt="">
        <div class="flex items-center">
          <img src="/img/head.png" class="w-32 mx-5" alt="">
          <div class="color-#9c753b px-5 leading-none">
            <div class="color-#9c753b font-bold text-14">Name12345</div>
            <span class="text-12 ml-5">$99999999</span>
          </div>
          <img src="/img/more.png" class="w-18 ml-5" alt="">
        </div>
      </div>

      <div class="menu-container" ref="menuContainer">
          <div v-for="(item, index) in menuList" :key="index" ref="menuItemRefs"
            class="menu-item flex flex-col items-center justify-center mb-3 cursor-pointer text-#946329"
            @click="handleClickNav(item, index)">
            <div class="menu-icon relative w-42 h-42" :class="{ 'active-menu-item': menuAactive === index }">
              <img v-if="menuAactive === index" :src="item.urls" alt="" class="absolute  w-full h-full " />
              <img v-else :src="item.url" alt="" class="absolute  w-full h-full " />
            </div>
            <span class="text-12 mt-3" :class="{ 'color-#300808': menuAactive === index }">{{ t(item.title) }}</span>
          </div>
        </div>
    </div>
    </van-sticky>
    <!-- 内容区域 -->
    <div class="main p-10 ">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="/img/swiper.png" />
        </van-swipe-item>
      </van-swipe>
      <!-- 消息通知栏 -->
      <van-notice-bar @click="goAnnouncement" color="#81632c" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
        background="transparent">
        <template #left-icon>
          <img src="/img/sound.png" class="w-14 h-14 mr-4" />
        </template>
      </van-notice-bar>
      <!-- 热门游戏 -->
      <div class="hot-game border-2 border-#ffea96 rounded-10 w-full  ">
        <!-- 标题 -->
        <div class="flex items-center justify-center pt-4">
          <!-- <img src="/img/hot.png" alt="" class="w-18 mr-5"> -->
          <div class="color-#411910 font-bold ">热门游戏</div>
        </div>
        <!-- 热门轮播图 -->
        <div class="flex justify-between items-center w-100% relative py-20">
          <img src="/img/left.png" alt="" class="w-24 absolute left--5 top-55" @click="pre"
            :class="{ 'opacity-70 cursor-not-allowed': isAtStart }">
          <div ref="hotBoxRef" class="hot-box  flex  items-center  flex-1">
            <div v-for="item in swiperList" :key="item.id" class="hot-item ">
              <img :src="item.img" alt="" class="w-96%  h-96% rounded-10">
              <div class="color-#300808 text-14">{{ item.name }}</div>
            </div>
          </div>
          <img src="/img/right.png" alt="" class="w-24 absolute right--5 top-55" @click="next"
            :class="{ 'opacity-70 cursor-not-allowed': isAtEnd }">
        </div>
      </div>
      <!-- JACKPOT -->
      <div class="jackpot mt-10">
        <img src="/img/jackpot_top_bg.png" alt="">
        <div class="jackpot-main   overflow-hidden overflow-y-auto">
          <div class="jackpot-item flex items-center justify-between p-8 rounded-10 bg-#fff9e3 mb-8 leading-none"
            v-for="item in jackpotList" :key="item.id">
            <div class="flex items-center h-full">
              <img :src="item.img" alt="" class="w-60  h-60 mr-10">
              <div class="flex flex-col justify-between h-full">
                <div class="flex  items-center  mb-18">
                  <img src="/img/cup.png" alt="" class="w-15 mr-3">
                  <div class="color-#37332c text-14">{{ item.title }}</div>
                </div>
                <div class="color-#e47b00 text-12 font-bold">赢取奖金</div>
              </div>
            </div>
            <div class="text-right mr-5">
              <div class="flex  items-center  mb-15">
                <img src="/img/gold.png" alt="" class="w-15 mr-3 mb-2">
                <div class="color-#ff4e00 font-bold ">{{ item.gold }}</div>
              </div>
              <div class="color-#7f6e56 text-10">{{ item.gameName }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 各类游戏内容 -->
      <div   ref="contBox">
        <div 
  class="category-box" 
  v-for="(item, index) in categoryList" 
  :key="item.id" 
  :ref="el => setContentItemRef(el, index)"
>
          <div class="bg-#ffffff">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img :src="item.logo" alt="" class="w-30 ">
                <div class="color-#614646 font-bold text-14">{{ t(item.title) }}</div>
              </div>
              <div class="flex items-center">
                <div class="color-#b0aeae text-14"> 查看所有</div>
                <img src="/img/arrow.png" alt="" class="w-6 ml-5">
              </div>
            </div>
            <MySwiper :items="swiperList" :is-at-start="isAtStart" :is-at-end="isAtEnd"
              @update:is-at-start="(val) => (isAtStart = val)" @update:is-at-end="(val) => (isAtEnd = val)"
              class="pt-10 pb-0" />
          </div>
        </div>
      </div>
      <!-- 横向滚动 -->
      <van-tabs v-model:active="active" swipeable class="tabs">
        <van-tab v-for="(item, index) in gameTab" :key="item.id">
          <template #title>
            <img :src="active == index ? item.img : item.unImg" alt="" class="w-72 h-24">
          </template>
          <div class="tab-item">
            <div v-for="item in tabContArr" :key="item.id" class="">
              <img :src="item.img" alt="" class="w-100  h-100 rounded-10">
              <div class="color-#300808 text-14 text-center">{{ item.name }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style lang="css" scoped>
.top {
  background: url('/img/top_bg.png') no-repeat;
  background-size: 100% 100%;
}

::v-deep .menu-tabs.van-tabs--line .van-tabs__wrap {
  height: 90px;
}

::v-deep .menu-tabs .van-tabs__nav {
  background: transparent;
}

::v-deep .menu-tabs .van-tab--active {
  color: #300808;
}

.main {
  background: url('/img/main_bg.png') no-repeat;
  background-size: 100% 100%;
}

.cont-box {
  max-height: calc(100vh - 120px);
  /* 根据实际顶部 menu 高度调整 */
  overflow-y: auto;
  position: relative;
}

.menu-container {
  display: flex;
  overflow-x: auto;
  /* 启用横向滚动 */
  white-space: nowrap;
  /* 防止换行 */
  -webkit-overflow-scrolling: touch;
  /* 在 iOS 上更流畅 */
  scrollbar-width: none;
  /* 可选：隐藏滚动条 */
  margin-top: 20px;
  padding-bottom: 8px;
}

.menu-container::-webkit-scrollbar {
  display: none;
  /* 可选：隐藏滚动条 */
}

.menu-item {
  flex: 0 0 auto;
  width: calc(20% - 11px);
  text-align: center;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.active-menu-item {
  background: url('/img/menu-bg.png') no-repeat center center;
  background-size: 100% 100%;
  color: #39110b;
}

::v-deep .van-notice-bar {
  padding: 0;
}

.hot-game {
  background: url("/img/hot_bg.png");
  background-size: 100% 100%;
}

.hot-box {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 8px;
}

.hot-item {
  flex: 0 0 auto;
  border-radius: 10px;
  width: calc(33.33% - 6px);
  text-align: center;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin-right: 10px;
}

.hot-item:last-child {
  margin-right: 0;
}

.jackpot-main {
  background: url('/img/jackpot_bg.png') no-repeat;
  background-size: 100% 100%;
  padding: 10px 15px;
  height: 300px;
  scroll-padding: 10px;
  -webkit-overflow-scrolling: touch;
}

.jackpot-item {
  background: url('/img/item-border.png') no-repeat;
  background-size: 100% 100%;
}

.jackpot-item:last-child {
  margin-bottom: 0;
}

.category-box {
  border: 10px solid transparent;
  /* 边框宽度 = 图片切图中的边角大小 */
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  /* padding: 15px; */
  margin: 10px 0;
  border-image-slice: 10;
  /* 切分九宫格的像素值，和上面 border-width 一致 */
  border-image-repeat: stretch;
  /* 拉伸模式，也可以是 round / repeat / space */
}

.tabs.van-tabs {
  border: 10px solid transparent;
  /* 边框宽度 = 图片切图中的边角大小 */
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  /* padding: 15px; */
  margin: 10px 0;
  border-image-slice: 10;
  /* 切分九宫格的像素值，和上面 border-width 一致 */
  border-image-repeat: stretch;
}

::v-deep .van-tabs__line {
  background: transparent;
}

.tabs .tab-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>